<!--网站首页-->
<template>
  <!--农产品库-->
  <div class="ncpk-warp">
    <div style="display: flex; align-items: center">
      <div style="width: calc(100% - 60px)">
        <a-divider orientation="left" orientation-margin="0px">农产品库</a-divider>
      </div>
      <div style="width: 60px">
        <a-button type="link" @click="toPage('Ncpk')">更多</a-button>
      </div>
    </div>


    <a-row :gutter="[16,16]">
      <a-col :span="6" v-for="product in productList">
        <a-card hoverable>
          <template #cover>
            <img alt="example" :src="`http://localhost:9763${product.image}`" style="width: 100%; height: 200px; "/>
          </template>
          <a-card-meta :title="product.name">
            <template #description>
              <div class="gwc-warp" style="">
                <div style="color: red;">
                  ￥ {{ Number(product.price).toFixed(2) }}
                </div>
                <div class="gwc-bj" @click="showModal(product)">
                  立即购买
                  <ShoppingCartOutlined/>
                </div>
              </div>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>


  <!--政策解读-->
  <div class="zcjd-warp">
    <div style="display: flex; align-items: center">
      <div style="width: calc(100% - 60px)"><a-divider orientation="left" orientation-margin="0px">政策解读</a-divider></div>
      <div style="width: 60px">
        <a-button type="link" @click="toPage('Zcjd')">更多</a-button>
      </div>
    </div>

    <a-row :gutter="[16,16]">
      <a-col :span="12" v-for="item in zcjdData">
        <a-card :title="item.title" :bordered="false" hoverable @click="openDetails(item)">
          <div style="height: 100px">
            <div v-html="item.content" class="text-overflow-4"></div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>


  <!--社会捐赠-->
  <div class="shjz-warp">

    <div style="display: flex; align-items: center">
      <div style="width: calc(100% - 60px)">
        <a-divider orientation="left" orientation-margin="0px">社会捐赠</a-divider>
      </div>
      <div style="width: 60px">
        <a-button type="link" @click="toPage('Shjz')">更多</a-button>
      </div>
    </div>

    <a-row :gutter="[16,16]">
      <a-col :span="6" v-for="item in shjzData">
        <a-card hoverable @click="openDetails2(item)">
          <template #cover>
            <img alt="example" :src="`http://localhost:9763${item.image}`" style="width: 100%; height: 160px"/>
          </template>
          <a-card-meta :title="item.title">
            <template #description>
              <p class="text-overflow-1">{{ item.subtitle }}</p>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </div>


  <a-modal v-model:open="open" :title="productData.name" @ok="handleOk"
           :width="800" :footer="null" :maskClosable="false">
    <div class="product-warp">
      <div class="left">
        <img :src="`http://localhost:9763${productData.image}`" style="width: 200px; height: 200px; border-radius: 4px"/>
      </div>
      <div class="right">
        <p><span>单价：</span>￥{{ Number(productData.price).toFixed(2) }}</p>
        <p><span>销量：</span>{{ productData.sales }}</p>
        <p><span>库存：</span>{{ productData.inventory }}</p>

        <div style="display: flex; ">
          <a-input-number prefix="数量：" v-model:value="productData.num" :min="1" :max="999"
                          style="margin-right: 20px; width: 200px"/>
          <a-button type="primary" @click="onBuy(productData)">立即购买</a-button>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {ShoppingCartOutlined} from '@ant-design/icons-vue';
import router from "@/router";
import axios from "axios";
import {message} from "ant-design-vue";

const userInfo = JSON.parse(localStorage.getItem('userInfo')) || null


const toPage = (name) => {
  router.push({name})
}

// 查询社会捐赠数据
const shjzData = ref([])
const queryShjzData = async () => {
  const {data} = await axios.get('http://localhost:9763/system/project/list')
  console.log(data.rows)
  shjzData.value = data.rows.splice(0, 4)
}
const openDetails2 = (item) => {
  if (!userInfo || !userInfo.id) {
    message.error('登录信息已过期，请重新登录!');
    setTimeout(() => {
      router.push({name: 'Login'})
    })
    return false
  }


  router.push({name: 'ShjzDetails', query: {id: item.id}})
}

// 查询政策解读数据
const zcjdData = ref([])
const queryZcjdData = async () => {
  const {data} = await axios.get('http://localhost:9763/system/news/list')

  data.rows.forEach(item => {
    const dom = new DOMParser().parseFromString(item.content, "text/html")
    let textContent = dom.querySelector('body').innerText
    item.content = textContent.substring(0, 200) + (textContent.length > 200 ? "..." : "")
  })

  zcjdData.value = data.rows.splice(0, 4)
}
const openDetails = (item) => {
  router.push({name: 'ZcjdDetails', query: {id: item.id}})
}


// 查询产品数据
const productList = ref([])
const queryProductData = async () => {
  const {data} = await axios.get('http://localhost:9763/system/product/list')
  productList.value = data.rows.splice(0, 4)
}

const productData = ref({})
const open = ref(false);
const showModal = (product) => {

  if (!userInfo || !userInfo.id) {
    message.error('登录信息已过期，请重新登录!');
    setTimeout(() => {
      router.push({name: 'Login'})
    })
    return false
  }

  open.value = true;
  productData.value = {...product}
};
const handleOk = e => {
  console.log(e);
  open.value = false;
};


const onBuy = async (product) => {
  if (product.num <= 0) {
    message.error('购买数量必须大于0!');
    return false
  }

  const params = {
    productId: product.id,
    productType: product.type,
    productName: product.name,
    image: product.image,
    memberId: userInfo.id,
    memberName: userInfo.nickname,
    num: product.num,
    money: product.num * product.price,
    buyDate: new Date(),
  }
  const {data} = await axios.post('http://localhost:9763/system/order', params)
  if (data.code == 200) {
    message.success('购买成功!');
    queryProductData()
    open.value = false;
  }
}

onMounted(() => {
  queryShjzData()
  queryZcjdData()
  queryProductData()
})
</script>

<style scoped>

.ncpk-warp {
  padding: 20px 0;
}

.zcjd-warp {
  padding: 20px 0;
}

.shjz-warp {
  padding: 20px 0;
}


.gwc-warp {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: bold;
}

.gwc-bj {
  background: rgb(233, 122, 85);
  background: linear-gradient(90deg, rgba(233, 122, 85, 0.30575980392156865) 20%, rgba(203, 207, 45, 0.5690651260504201) 62%);
  border-radius: 6px;
  box-shadow: 20px 20px 60px #bebebe,
  -20px -20px 60px #ffffff;
  padding: 0 10px;
}

.text-overflow-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-overflow-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-warp {
  display: flex;
}

.product-warp .left {
  margin-right: 50px;
}
</style>
